<template>
    <div class="app-container">
      <!--搜索条件查询-->
      <div class="search-div">
            <el-form label-width="70px" size="small">
                <el-row>
                        <el-col :span="8">
                            <el-form-item label="关 键 字">
                                <el-input style="width: 95%" v-model="searchObj.keyword" placeholder="用户名/姓名/手机号码"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" style="margin-right: 10px;">
                            <el-form-item label="操作时间">
                                <el-date-picker
                                    v-model="createTimes"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    style="margin-right: 10px;width: 100%;"
                                />
                            </el-form-item>
                        </el-col>
                        <el-button type="primary" icon="el-icon-search" size="mini"  @click="fetchData()">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
                </el-row>
            </el-form>
        </div>

        <!-- 工具条 -->
        <div class="tools-div">
            <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添 加</el-button>
        </div>
        
      <!-- 列表 -->
        <el-table
          v-loading="listLoading"
          :data="list"
          stripe
          border
          style="width: 100%;margin-top: 10px;">
  
          <el-table-column
            label="序号"
            width="70"
            align="center">
            <template slot-scope="scope">
              {{ (page - 1) * limit + scope.$index + 1 }}
            </template>
          </el-table-column>
  
          <el-table-column prop="username" label="用户名" width="180"/>
          <el-table-column prop="name" label="姓名" width="110"/>
          <el-table-column prop="phone" label="手机" />
          <el-table-column label="状态" width="80">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status === 1" @change="switchStatus(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" />
  
          <el-table-column label="操作"  align="center" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改"/>
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)" title="删除" />
              <el-button type="warning" icon="el-icon-baseball" size="mini" @click="showAssignRole(scope.row)" title="分配角色"/>
            </template>
          </el-table-column>
        </el-table>

      <!-- 分页组件 -->
      <el-pagination
        :current-page="page"
        :total="total"
        :page-size="limit"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="fetchData"
      />

    <!--添加/修改弹框-->
    <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%" >
      <el-form ref="dataForm" :model="sysUser"  label-width="100px" size="small" style="padding-right: 40px;">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="sysUser.username"/>
        </el-form-item>
        <el-form-item v-if="!sysUser.id" label="密码" prop="password">
          <el-input v-model="sysUser.password" type="password"/>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="sysUser.name"/>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="sysUser.phone"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
        <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分配角色对话框 -->
    <el-dialog title="分配角色" :visible.sync="dialogRoleVisible">
      <el-form label-width="80px">
        <el-form-item label="用户名">
          <el-input disabled :value="sysUser.username"></el-input>
        </el-form-item>

        <el-form-item label="角色列表">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="userRoleIds" @change="handleCheckedChange">
            <el-checkbox v-for="role in allRoles" :key="role.id" :label="role.id">{{role.roleName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="assignRole" size="small">保存</el-button>
        <el-button @click="dialogRoleVisible = false" size="small">取消</el-button>
      </div>
    </el-dialog>

    </div>
  </template>


  <script>
  import api from '@/api/user/user.js'
  import roleApi from '@/api/role/role.js'
  export default {
    data(){
      return{
          listLoading: true, // 数据是否正在加载
          list: [], // 数据列表
          total: 0, // 数据库中的总记录数
          page: 1, // 默认页码
          limit: 3, // 每页记录数
          searchObj: {}, // 查询表单对象
          // 处理时间范围条件的
          createTimes: [],
          dialogVisible: false,
          sysUser: {},
          dialogRoleVisible:false,
          allRoles: [], // 所有角色列表
          userRoleIds: [], // 用户的角色ID的列表
          isIndeterminate: false, // 不是全选状态的标记
          checkAll: false // 是否全选
      }
    },
    created(){
        this.fetchData();
    },
    methods:{
        // 修改状态
        switchStatus(row){
          // 如果 可用  设置为 不可用  如果不可用  设置为 可用
          row.status=row.status === 1 ? 0 : 1;
          api.updateStatus(row.id,row.status).then(response=>{
            //a.给出提示
            this.$message.success(response.message||'操作成功');
            //b.再次刷新列表
            this.fetchData();
          })
        },
        edit(id){
            this.dialogVisible = true;
            //去数据库中查询旧数据
            api.getUserById(id).then(response=>{
                this.sysUser = response.data;
            })
        },
        add(){
            this.dialogVisible=true,
            this.sysUser = {}
        },
        fetchData(page=1){
            this.page = page;
            if(this.createTimes && this.createTimes.length ==2) {
            this.searchObj.createTimeBegin = this.createTimes[0];
            this.searchObj.createTimeEnd = this.createTimes[1];
            }

            api.getUserPageInfo(this.page, this.limit, this.searchObj).then(
            response => {
              //this.list = response.data.list
              this.list = response.data.records;
              this.total = response.data.total;
              // 数据加载并绑定成功
              this.listLoading = false;
            }
          )   
        },  
        resetData(){
          // 1.清空条件搜索
          this.searchObj={};
          //2.清空日期条件
          this.createTimes=[];
          //3.刷新数据列表
          this.fetchData();
        },
        saveOrUpdate(){
        if(this.sysUser.id!=null){
            this.updateUser(); //修改
        }else{
            this.addUser(); //添加
        }
      },
      addUser(){
        api.addUser(this.sysUser).then(response=>{
            //弹一下操作成功的提示框
            this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
            this.dialogVisible=false; //隐藏对象框
            this.fetchData(); //刷新数据
        });
      },
      updateUser(){
            //同步数据到数据库当中
            api.updateUser(this.sysUser).then(response=>{
                //弹一下操作成功的提示框
                this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                this.dialogVisible=false; //隐藏对象框
                this.fetchData(); //刷新数据
            });
      },
      //展示分配角色
      showAssignRole(row){
        this.dialogRoleVisible=true;
        this.sysUser = row;
        //调用axios的方法向后端调用接口
        roleApi.getRoleByUserId(row.id).then(response=>{
            console.log(response.data);
            this.allRoles = response.data.allRoles;
            this.userRoleIds = response.data.userRoleIds;
            this.checkAll =this.userRoleIds.length===this.allRoles.length
            this.isIndeterminate = this.userRoleIds.length>0 && this.userRoleIds.length<this.allRoles.length
        });
      },
      //全选复选框按钮的监听事件
      handleCheckAllChange(value){
        this.userRoleIds=value?this.allRoles.map(item=>item.id):[];
        this.isIndeterminate = false;
      },
      //每一个复选框的监听事件
      handleCheckedChange(value){
        const {userRoleIds, allRoles} = this  //解构，获得指定对象中的部分内容
        this.checkAll = userRoleIds.length === allRoles.length && allRoles.length>0
        this.isIndeterminate = userRoleIds.length>0 && userRoleIds.length<allRoles.length
      },
      //执行给用户分配角色的方法
      assignRole(){
        //为了把两个参数值封装成一个对象
        let roleVo = {
          userId:this.sysUser.id,
          roleIdList:this.userRoleIds
        }

        //调用后端接口把数据同步到数据库当中
        roleApi.assignRoles(roleVo).then(response=>{
          //弹出一个成功了的提示框
          this.$message({type:'success',message:'角色分配成功！'});
          //关闭当前的对象框
          this.dialogRoleVisible=false;
          //刷新数据
          this.fetchData(this.page); //this.page:刷新数据后还停留在当前页
        });
      }

    }
  }
</script>

